<template>
  <div style="float: left">
    <el-input v-model="file_path" readonly style="width:300px;float: left"></el-input>
    <el-upload action="" ref="upfile" style="float: left;"
               :show-file-list="true"
               :auto-upload="true"
               :file-list="file_list"
               :on-change="handleChange"
               :http-request="handleUploadFile"
               :on-error="uploadFileError"
               :on-success="uploadFileSuccess"
               :on-exceed="handleExceed"
               :on-remove="handleRemove"
               :limit=1>
      <el-button size="medium" type="success" style="margin-left:10px">选择文件</el-button>
      <div slot="tip" class="el-upload__tip">1.只能单一文件，且不超过10MB</div>
      <div slot="tip" class="el-upload__tip">2.图片类型只能上传jpg/png文件，且不超过10MB</div>
    </el-upload>
    <!--    <el-button size="medium" type="primary" @click="handleUploadFile" style="margin-left:10px;">点击上传</el-button>-->
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import axios from "axios";

export default {
  name: "uploadFile",
  data() {
    return {
      id: 0,
      file_list: [],
      file_path: '',
    }
  },
  props: {
    fileId: {type: [Object, Number], default: 0}
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    handleInit() {
      this.file_list = [];
      this.imgs = [];
    },
    async handleUploadFile() {
      if (this.file_list.length == 0) {
        this.$message.warning('请选择一个文件上传');
        return;
      }
      //这里加入一个上传文件类型的判断，区别上传的图片或一般文件
      // console.log("this is file type check", this.file_list[0].raw.name, this.file_list[0].raw.type);
      if (this.file_list[0].raw.type in ['application/jpg', 'application/png', 'image/jpeg', 'image/png', 'image/bmp', 'image/gif']) {
        await this.uploadPicFile();
      } else {
        await this.uploadFile();
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleRemove(file, fileList) {
      this.file_list = fileList;
      this.file_path = '';
      this.$emit('fMethod', '');
    },
    uploadFileError(err, file, fileList) {
      this.$message.error(`上传失败！本次选择了 ${file.length} 个文件，共选择了 ${file.length + fileList.length} 个文件` + err)
    },
    uploadFileSuccess(response, file, fileList) {
      console.log("uploadSuccess", response, file, fileList);
    },
    handleChange(file, fileList) {
      //    console.log(`${file.length + fileList.length}`)
      if (file.status === 'ready') {
        this.file_list = fileList;
      }
      if (file.status === 'finished') {
        this.$message.success('上传成功')
      }
    },
    uploadFile() {
      let formData = new FormData();
      formData.append('files', this.file_list[0].raw);
      let url = 'http://175.24.116.12:9006/file/upload'
      const options = {
        method: 'POST',
        // headers: {'content-type': 'multipart/form-data'},
        data: formData,
        url,
      };
      return axios(options).then(res => {
        if (res.code === 200) {
          this.file_path = res.data.url;
          this.$emit('fMethod', res.data);
        } else {
          this.$message.error('上传失败')
        }
      });
    },
    uploadPicFile() {
      let formData = new FormData();
      formData.append('files', this.file_list[0].raw);
      let url = 'http://175.24.116.12:9006/file/upload/pic'
      const options = {
        method: 'POST',
        // headers: {'content-type': 'multipart/form-data'},
        data: formData,
        url,
      };
      return axios(options).then(res => {
        if (res.code === 200) {
          this.$message.success('上传成功')
        } else {
          this.$message.error('上传失败')
        }
        this.file_path = res.data.url;
        this.$emit('fMethod', res.data);
      });
    },
  },
  created() {

  },
  mounted() {
  },
  watch: {
    fileId: {
      immediate: true,
      handler(fileId) {
        this.id = fileId;
      }
    }
  }
}
</script>

<style scoped>
</style>